<template>
	<view class="page">

		<view class="header">
			<view class="points">
				<view class="points-box">
					<view class="points-text">
						{{ user.score ? user.score >= 100000 ? (user.score / 10000) + 'w' : user.score : 0 }}
					</view>
					<view style="display: flex;align-items: center;">
						<image src="../../static/images/jifen.png" mode="widthFix"
							style="width: 34rpx;margin-top: 4rpx;"></image>
						<span style="font-weight: 400;font-size: 28rpx;color: #FFFFFF;padding-left: 12rpx;">积分余额</span>
					</view>
				</view>
				<view class="btn" @click="goPoints()"><span>积分明细</span></view>
			</view>
			<view class="tabs">
				<view class="tabs-box" :class="currentTab === 0 ? 'select-left' : ''" @click="switchTab(0)">
					<span>缴费兑换专区</span></view>
				<view class="tabs-box" :class="currentTab === 1 ? 'select-right' : ''" @click="switchTab(1)">
					<span>会员服务专区</span></view>
			</view>
		</view>


		<view class="products">
			<view v-for="(item, index) in scoreList" :key="index" class="product-item" @click="goGoodsDetail(item.id)">
				<image :src="$wanlshop.oss(item.image)" class="product-image"></image>
				<view class="product-info" v-if="item.maximum_proportion == 100">
					<text class="product-title">{{ item.title }}</text>
					<view class="price">
						<image src="../../static/images/jifen.png" mode="widthFix"
							style="width: 34rpx;margin-top: 4rpx;"></image>
						<span>{{ item.useScore }}</span>
					</view>
				</view>
				<view class="product-info" v-else>
					<text class="product-title">{{ item.title }}</text>
					<view class="price">
						<span>￥{{ item.price }}+</span>
						<image src="../../static/images/jifen.png" mode="widthFix"
							style="width: 34rpx;margin-top: 4rpx;"></image>
						<span>{{ item.useScore }}</span>
					</view>
				</view>
				<view class="stcoke">
					已售{{item.sales}} I 库存{{item.stock}}
				</view>
			</view>
		</view>


		<uv-load-more :status="loadStatus" @load="loadMore"></uv-load-more>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				
				scoreList: [],
				currentPage: 1,
				lastPage: 1,
				loadStatus: 'loadmore',
				isEmpty: false,
				currentTab: 0,
			};
		},
		onLoad() {

			this.getScoreShopsList();
		},
		computed: {
			...mapState(["user", "statistics", "common"]),
		},
		methods: {
			goGoodsDetail(id){
				uni.navigateTo({
					url:'/pages/score/score?id='+id
				})
			},
			goPoints(){
				uni.navigateTo({
					url:'/pages/user/signin/log'
				})
			},
			switchTab(tabIndex) {
				this.currentTab = tabIndex
				this.currentPage = 1,
				this.scoreList = []
				this.getScoreShopsList()
			},


			loadMore() {
				if (this.currentPage >= this.lastPage) {
					this.loadStatus = 'nomore';
					return;
				}
				this.currentPage += 1;
				this.getScoreShopsList();
			},


			async getScoreShopsList() {
				let that = this;
				that.loadStatus = 'loading';
				await uni.request({
					url: '/wanlshop/product/scoreList',
					method: 'GET',
					data: {
						page: that.currentPage,
						type:that.currentTab
					},
					success: (res) => {
						console.log(res, 'Product list fetched');
						if (res.data && res.data.data) {
							that.scoreList = [...that.scoreList, ...res.data.data];
							that.isEmpty = !that.scoreList.length;
							that.lastPage = res.data.last_page;
							that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' :
								'nomore';
						}
					},
					fail: (error) => {
						console.log('Error fetching products:', error);
						that.loadStatus = 'error';
					},
				});
			},
		},
	};
</script>
<style scoped>
	.page {
		padding: 20rpx;

	}

	.header {}

	.points {
		display: flex;
		justify-content: space-between;
		background-image: url('../../static/images/jifenbeijing.png');
		background-size: cover;
		background-position: center;
		width: 710rpx;
		height: 163rpx;
		color: #FFFFFF;
		align-items: center;
	}

	.points-box {
		padding-left: 36rpx;
		min-width: 166rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.points-text {
		font-weight: 400;
		font-size: 50rpx;
		color: #FFFFFF;
	}

	.btn {
		width: 184rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 26rpx 0rpx 0rpx 26rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FF6501;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tabs {
		display: flex;
		justify-content: center;
		margin-top: 11px;
		width: 100%;
		height: 51px;
		border: 1px solid #FF6501;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
	}

	.tabs-box {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FF6501;

	}

	.select-left {
		width: 50%;
		height: 51px;
		color: #FFFFFF;
		background: #FF6501;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
	}

	.select-right {
		width: 50%;
		height: 51px;
		color: #FFFFFF;
		background: #FF6501;
		border-radius: 0rpx 10rpx 10rpx 0rpx;
	}

	.products {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
		
	}

	.product-item {
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.product-image {
		width: 345rpx;
		height: 345rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

	}

	.product-title {
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: left;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.product-info {
		padding: 18rpx;
		background-color: #FFFFFF;
	}

	.price {
		margin-top: 20rpx;
		color: #ff5000;
		display: flex;
		flex-direction: row;
	}
	.stcoke{
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #C2C2C2;
		line-height: 40rpx;
		text-align: left;
	}
</style>